﻿/******************************************************************************
* File description: CustomComboColorPicker.qml
* Function: 下拉式取色器
* Current Version: 1.0.0
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {
    id: root

    property color curColor: config.themeColor

    property int editWidth: 180*dp
    property int titleWidth: title === "" ? 0 : 80*dp
    property string title: ""
    property bool required: false
    property bool editable: true
    property var titleHAlign: Text.AlignRight       // 标题水平对齐方式
    property var titleVAlign: Text.AlignVCenter     // 标题垂直对齐方式
    property bool titleAlignJustify: true           // 标题是否两端对齐（设置为true时会覆盖titleHAline属性！！！）

    property double popupHeight: 180*dp


    function getColor(){
        return curColor;
    }function setColor(color){
        colorPicker.setColor(color)
    }
    signal colorChanged(var color)

    function getItemListHeight(){
        return 100*dp;
    }


    height: 40*dp
    width: titleWidth + editWidth

    Item{
        height: parent.height
        width: titleWidth - 16*dp
        Text{
            text: {
                if(!titleAlignJustify) return title
                else{

                    if(text_rawTitle.contentWidth === 0 || text_space.contentWidth === 0){
                        return   title
                    }

                    return funcTools.justifyAlignAppendSpace(title, parent.width, text_rawTitle.width, text_space.width)
                }
            }
            font.pixelSize: config.fontsize
            x: 0
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: titleAlignJustify ? Text.AlignHCenter : titleHAlign
        }
        Text{           // 固定在左边的星号
            visible: required
            text: '<font color="#FF0000"">* </font>'
            x: -10*dp
            font.pixelSize: config.fontsize
            height: titleHeight
            width: 10*dp
            verticalAlignment: Text.AlignVCenter
        }
    }
    Text{           // 用来计算空格的长度
        id: text_space
        text: " "
        font.pixelSize: config.fontsize
        visible: false
    }
    Text{           // 用来计算纯文本的长度
        id: text_rawTitle
        text: title
        font.pixelSize: config.fontsize
        visible: false
    }

    ComboBox {
        id: control
        height: parent.height
        width: editWidth
        x: titleWidth
        model: []


        // 下拉框中每一个选项的代理样式
        delegate: ItemDelegate {
        }

        // 显示框文本样式
        contentItem: Text {
            id: textInput
            text: curColor
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
            leftPadding: 10*dp
            clip: true
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            border.color: (this.isHovered || control.popup.visible) ? config.themeColor : "#CCCCCC"
            radius: 3*dp
            property bool isHovered: false
            MouseArea{      // Hover样式
                anchors.fill: parent
                propagateComposedEvents: true
                hoverEnabled: config.hoverEnabled
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.isHovered = true && config.hoverEnabled
                }onExited: {
                    parent.isHovered = false
                }onPressed:{
                    mouse.accepted = false
                }onReleased:{
                    mouse.accepted = false
                }
            }
            // 阴影
            layer.enabled: control.popup.visible && config.device!==2
            layer.effect: DropShadow {
                radius: 12*dp
                samples: 43
                transparentBorder: true
                color: "#4D1677FA"
            }
        }

        // 向下三角箭头
        indicator: Item {
            width: 55*dp;  height: 20*dp
            x: control.width - 60*dp
            y: control.height/2 - 10*dp
            Rectangle{              // 颜色
                height: 20*dp
                width: 25*dp
                color: curColor
            }Image {
                x: 30*dp
                height: 20*dp
                width: 25*dp
                source: "qrc:/picture/downarrow.png"
            }
        }

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popupHeight
            y: control.height+2*dp
            padding: 0
            // popup的内容
            contentItem: Rectangle{
                radius: 3*dp
                height: popupHeight;  width: control.width
                clip: true
                ColorPicker{
                    id: colorPicker
                    width: parent.width
                    height: parent.height
                    onColorChanged: {
                        curColor = c
                        root.colorChanged(curColor)
                    }
                    onVisibleChanged: {
                        if(visible){
                            setColor(root.curColor)
                        }
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }

    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !editable
    }


}
